{{define "chapter02/test_upload3.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/static/js/jquery.min.js"></script>
</head>
<body>
    ajax单文件上传 <br />
    <form>
        <input type="file" id="file" /> <br />
        <input type="text" id="name" /> <br />
        <input type="button" value="提交" id="btn_upload" />
    </form>
    <script>
        var btn_upload = document.getElementById("btn_upload");

        btn_upload.onclick = function (ev) {
            var name = document.getElementById("name").value;
            // 能够接收所有类型
            var form_data = new FormData();
            // console.log($("#file"));
            // console.log($("#file")[0].files[0])
            // console.log(name)
            form_data.append("file", $("#file")[0].files[0])
            form_data.append("name", name)
            
            $.ajax({
                url: "/test_do_upload3",
                type: "POST",
                data: form_data,
                contentType: false, // 默认为true，提交的时候不会序列化data，而是直接使用data
                processData: false, // 默认为true，会使用默认的类型，导致失去分界符号，识别不到文件
                success: function(data) {

                },
                fail: function(data) {

                }
            })
        }
    </script>
</body>
</html>
{{end}}